<template>
  <div class="accountBottom">
    <div class="bottom-play" @click="selectAllMusic">
      <span></span>
      播放全部
    </div>
    <div class="bottom-wrapper">
      <ScrollView ref="scrollView">
        <SongListItem :newSongs="switchNun === 0 ? favoriteList :historyList">
        </SongListItem>
      </ScrollView>
    </div>
  </div>
</template>

<script>
import SongListItem from "../../components/SongListItem";
import ScrollView from "../../components/ScrollView";
import {mapGetters, mapActions, mapMutations} from "vuex"

export default {
  props: {
    switchNun: Number
  },
  name: "AccountBottom",
  components: {
    SongListItem,
    ScrollView
  },
  computed: {
    ...mapGetters([
      'historyList',
      'favoriteList'
    ])
  },
  methods: {
    ...mapActions([
      'setFullScreen',
      'setMiniPlayer',
      'getSongDetail',
      'setCurrentIndex'
    ]),
    ...mapMutations([
      'SET_SONG_DETAIL'
    ]),
    selectAllMusic() {
      // let ids = []
      if (this.switchNun === 0) {
        // ids = this.favoriteList.map((item) => {
        //   return item.id
        // })
        this.SET_SONG_DETAIL(this.favoriteList)
      } else {
        // ids = this.historyList.map((item) => {
        //   return item.id
        // })
        this.SET_SONG_DETAIL(this.historyList)
      }
      this.setFullScreen(true);
      this.setMiniPlayer(false);
      this.setCurrentIndex(0)
      this.$refs.scrollView.refresh(1000);
      //发送请求
      // this.getSongDetail([ids]);
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/mixin";
@import "../../assets/css/variable";

.accountBottom {
  position: fixed;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;

  .bottom-play {
    width: 200px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    margin: 20px;
    padding: 5px 0;
    @include font_size($font_medium);
    @include bg_color();
    color: #fff;
    border-bottom: 1px solid #ccc;
    @include border_color();

    span {
      display: inline-block;
      width: 46px;
      height: 46px;
      @include bg_img("../../assets/images/play");
      margin: 0 15px;
    }
  }

  .bottom-wrapper {
    position: fixed;
    top: 210px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
}
</style>
